<template>
  <div class="dashboard-container">
    <div class="app-container">

      <el-card v-loading="loading">
        <!-- 放置顶部输入框和下拉菜单 -->
        <el-row type="flex" justify="between">
          <el-col :span="22">
            <div>
              <el-col :span="4">
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  clearable
                />
              </el-col>
              <el-col :span="4" style="margin-left:20px">
                <el-select v-model="page.subject_id" placeholder="归属学科" clearable @change="selectChangeSub">
                  <el-option
                    v-for="item in options.options1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-model="page.directory_id" placeholder="归属目录" clearable @change="selectChangeLists">
                  <el-option
                    v-for="item in options.options2"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-select v-model="value2" placeholder="显示状态" clearable @change="selectChangeDis">
                  <el-option
                    v-for="item in options.options3"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <!-- 按钮 -->
              <el-col :span="4">
                <el-button size="small" type="primary" plain @click="selectScreen(page)">搜索</el-button>
                <el-button size="small" @click="selectReset()">重置</el-button>
              </el-col>
            </div>
          </el-col>

          <el-col :span="1">
            <el-button size="big" type="primary" plain @click="openSub">新增标签</el-button>
          </el-col>

        </el-row>
        <!-- 放置表格和分页 -->
        <el-table border :data="list" style="margin-top:10px">
          <el-table-column label="序号" sortable="" type="index" align="center" />
          <el-table-column label="标签名称" sortable="" prop="tag_name" align="center" />
          <el-table-column label="归属目录" sortable="" prop="directory_name" align="center" />
          <el-table-column label="归属学科" sortable="" prop="subject_name" align="center" />
          <el-table-column label="创建人" sortable="" prop="username" align="center" />
          <el-table-column label="是否显示" sortable="" prop="is_show" align="center">
            <!-- 使用switch开关 -->
            <!-- <template slot-scope="{row}">
              <el-switch
                :value="row.is_show === 1"
                active-text="是"
                inactive-text="否"
                @change="changeIsShow(row.id)"
              />
            </template> -->
            <template slot-scope="{row}">
              <el-switch
                v-model="row.is_show"
                :active-value="1"
                :inactive-value="2"
                active-text="是"
                inactive-text="否"
                @change="switchStatus(row.id,row.is_show)"
              />
            </template>
            <!-- @change="switchStatus(scope.row.id,scope.row.is_show)" -->
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="160px" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small">
                <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="editSubjectTag(row.id)" />
              </el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteSubjectTag(row.id)" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            background
            :current-page="page.page"
            :page-sizes="[5, 10, 20]"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="changeSize"
            @current-change="changePage"
          />

        </el-row>
      </el-card>
      <addSubjectTag ref="addSubjectTag" :options.sync="options" :page.sync="page" />
    </div>
  </div>
</template>
<script>
import { getSubjectTag, deleteSubjectTag, getSubjectName, echoSubject, switchStatus } from '@/api/subject'
import AddSubjectTag from '../components/addSubjectTag.vue'

export default {
  name: 'SubjectTag',
  components: {
    AddSubjectTag
  },
  data() {
    return {
      is_show: '',
      input: '',
      loading: false,
      showDialog: false,
      list: [], // 接收数据

      // 分页组件的数据
      page: {
        page: 1,
        limit: 10,
        total: 0,
        tag_name: '',
        subject_id: '',
        directory_id: '',
        rowsId: null // 编辑按钮点击的行
      },
      options: {
        options1: [],
        value: '',
        options2: [],
        value1: '',
        options3: [{
          value: 1,
          label: '显示'
        }, {
          value: 2,
          label: '隐藏'
        }]
      },
      value2: ''
    }
  },
  created() {
    this.getSubjectTag()
    this.getSubjectName()
  },
  methods: {
    // 获取页面数据
    async getSubjectTag() {
      this.loading = true
      const { data } = await getSubjectTag(this.page)
      // console.log(data)
      this.list = data.list
      // console.log(data.list)
      this.page.page = data.page
      this.page.total = data.total
      this.page.limit = data.limit

      this.loading = false
    },
    // 页码更换
    changePage(newPage) {
      // 最新的页码
      this.page.page = newPage
      this.getSubjectTag()
    },
    changeSize(val) {
      // val是每页条数
      this.page.limit = val
      this.getSubjectTag()
    },

    // switch 点击切换
    async  switchStatus(id, state) {
      // console.log(id)
      state = state === 1
      // console.log(state)
      await switchStatus({ id: id, is_show: state })
      this.$message.success('状态切换成功')
      // 重新拉取数据
      this.getSubjectTag()
    },

    // 删除标签
    async deleteSubjectTag(id) {
      try {
        // console.log(id)
        await this.$confirm('确认删除吗？')
        await deleteSubjectTag(id)
        this.$message.success('标签删除成功')

        // 如果不是第一页，且只有一个元素，删除成功，则需要把页码-1，重新拉取列表
        if (this.list.length === 1 && this.page.page !== 1) {
          this.page.page--
        }

        // 重新拉取数据
        this.getSubjectTag()
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科信息
    async  getSubjectName() {
      const { data } = await getSubjectName()
      // console.log(data)
      this.options.options1 = data
    },
    //  学科下拉点击
    selectChangeSub(val) {
      // console.log(val)
      this.options.options2 = []
      this.page.subject_id = val
      const datas = this.options.options1.filter(item => item.id === val)
      // this.abc.push(...datas[0].children)
      this.options.options2 = datas[0].children
      console.log(this.options.options2)
      // console.log(datas[0].children)
      this.page.directory_id = ''
      console.log(this.page.directory_id)
    },
    // 目录下拉点击
    selectChangeLists(val) {
      this.page.directory_id = val
      // console.log(val)
    },
    // 显示下拉点击
    selectChangeDis(val) {
      this.page.is_show = val
    },
    // 列表筛选
    async selectScreen(val) {
      var { data } = await getSubjectTag(val)
      this.list = data.list
    },
    // 筛选重置
    async selectReset() {
      this.options.options1.value = ''
      this.options.options2.value1 = ''
      this.value2 = ''
      this.page = {
        page: 1,
        limit: 10,
        total: 0,
        tag_name: '',
        subject_id: '',
        directory_id: ''
      }
      await getSubjectTag(this.page)
      // 刷新数据
      this.getSubjectTag()
    },
    openSub() {
      this.$refs.addSubjectTag.showDialog = true
      this.getSubjectName()
    },
    // 修改标签
    async editSubjectTag(id) {
      this.page.rowsId = id
      const { data } = await echoSubject(this.page.rowsId)
      const datas = this.options.options1.filter(item => item.id === data.subject_id)
      this.options.options2 = datas[0].children

      this.$refs.addSubjectTag.showDialog = true
      this.$refs.addSubjectTag.form = data
    }
  }
}
</script>

<style lang="sass" scope>

</style>
